<template>
  <!-- 人员管理 -->
  <div class="Project-box InsectMonitoring-box">
    <div class="InsectTitle1 publicTiTle">人员管理</div>
    <div class="InsectTitle2 publicETiTle">农田人员统计</div>
    <div class="InsectTitle3 publicETiTle">农田人员总数</div>
    <div class="InsectTitle4 publicETiTle">男女比例</div>
    <div class="InsectTitle5 publicETiTle">近7日人员打卡统计</div>
    <div class="InsectUnit1 publicUnit">人</div>
    <div class="InsectUnit2 publicUnit">00000000</div>
    <div class="InsectBox1">
      <div class="Box1Ld">
        <div class="LDleft">领导</div>
        <div class="LDRight">000<span>人</span></div>
      </div>
      <div class="Box1Ld">
        <div class="LDleft">员工</div>
        <div class="LDRight">000 <span>人</span></div>
      </div>
    </div>
    <div class="InsectBox2">
      <div class="Box2Img">
        <pieChartEcahrts :pieChartObj="pieChartObj" />
      </div>
      <div class="Box2Right">
        <PieLender :PieLenderObj="PieLenderObj" />
      </div>
    </div>
    <div class="InsectBox3">
      <div class="Box3left">
        <div class="Box3T">
          <div class="aa">男士</div>
          <div class="bb">000人</div>
        </div>
        <div class="Box3B">
          <ScaleDiagram :sexRatioList="sexRatioList" />
        </div>
        <div class="nanT" style="color: rgba(83, 202, 255)">
          100<span>%</span>
        </div>
      </div>
      <div class="Box3left">
        <div class="Box3T">
          <div class="aa">女士</div>
          <div class="bb">000人</div>
        </div>
        <div class="Box3B">
          <ScaleDiagram :sexRatioList="sexRatioList1" />
          <div class="nanT" style="color: rgba(255, 73, 73)">
            100<span>%</span>
          </div>
        </div>
      </div>
    </div>
    <div class="InsectBox4">
      <lineChartEcharts :lineChartList="lineChartList" />
    </div>
    <div class="InsectMBox4">
      <div class="box4T1">序号</div>
      <div class="box4T1">职务</div>
      <div class="box4T1">姓名</div>
      <div class="box4T1">性别</div>
      <div class="box4T1">年龄</div>
      <div class="box4T1">图片</div>
      <div class="box4T1">操作</div>
    </div>
    <div class="InsectMBox5">
      <div class="InsectMBox5I" v-for="item in 10">
        <div class="box4T1">xxxx</div>
        <div class="box4T1">xxxx</div>
        <div class="box4T1">xxxx</div>
        <div class="box4T1">xxxx</div>
        <div class="box4T1">xxxx</div>
        <div class="box4T1">
          <div class="box4T1Img">
            <el-image
              style="width: 100%; height: 95%; margin-top: 1%"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              :fit="fit"
            />
          </div>
        </div>
        <div class="box4T1">xxxx</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import pieChartEcahrts from "@/components/pieChartEcahrtsCun.vue"
import PieLender from "@/components/PieLender1.vue"
import ScaleDiagram from "@/components/ScaleDiagram.vue"
import lineChartEcharts from "@/components/lineChartEcharts.vue"

const lineChartList = ref({
  grid: {
    top: 40,
    left: 10,
    right: 10,
    bottom: 10,
    containLabel: true
  },
  xData: ["12-1", "12-2", "12-3", "12-4", "12-5", "12-6"],
  seriesObj: {
    价格: [10, 20, 30, 20, 50, 10]
  },
  // 从浅到深(先量上面再量下面)
  colorList: {
    价格: ["rgba(100, 235, 197,.4)", "rgba(100, 235, 197)"]
  },
  danwei: "单位: 元",
  isShowlegend: false, // 判断需不需要展示图例的布尔值
  labelShow: true, //是否展示图片
  smooth: false //是否平滑曲线
})

const sexRatioList = ref({
  name: "男士",
  value: 70
})
const sexRatioList1 = ref({
  name: "女士",
  value: 30
})
const PieLenderObj = ref({
  danwei: "人",
  Data: [
    {
      value: 100,
      name: "实到"
    },
    { value: 80, name: "请假" }
  ],
  colorList: [
    ["rgba(89, 249, 225)", "rgba(89, 249, 225)"],
    ["rgba(255, 167, 38)", "rgba(255, 167, 38)"]
  ]
})
const pieChartObj = ref({
  radius: ["65%", "85%"],
  center: ["49.8%", "50%"],
  pieChartList: [
    {
      value: 100,
      name: "实到"
    },
    { value: 80, name: "请假" }
  ],
  colorList: [
    ["rgba(89, 249, 225)", "rgba(89, 249, 225)"],
    ["rgba(255, 167, 38)", "rgba(255, 167, 38)"]
  ]
})
</script>
<style scoped lang="less">
.InsectMonitoring-box {
  background: url("@/assets/PersonnelMaterials/XXC_SCGL_1@2x.png") no-repeat
    center;
  background-size: 100% 100%;
  background-color: rgba(15, 75, 63);
  position: relative;
  .InsectTitle1 {
    position: absolute;
    left: 30px;
    top: 1px;
  }
  .InsectTitle2 {
    position: absolute;
    left: 10px;
    top: 53px;
  }
  .InsectTitle3 {
    position: absolute;
    left: 44px;
    top: 95px;
  }
  .InsectTitle4 {
    position: absolute;
    left: 10px;
    top: 332px;
  }
  .InsectTitle5 {
    position: absolute;
    left: 10px;
    top: 428px;
  }
  .InsectUnit1 {
    position: absolute;
    right: 60px;
    top: 95px;
  }
  .InsectUnit2 {
    font-weight: 600;
    position: absolute;
    right: 80px;
    top: 91px;
    font-size: 22px;
    color: #59f9e1;
  }
  .InsectBox1 {
    width: 100%;
    height: 30px;
    position: absolute;
    top: 131px;
    display: flex;
    justify-content: space-around;
    .Box1Ld {
      width: 176px;
      height: 30px;
      line-height: 30px;
      background: url("@/assets/PersonnelMaterials/TULI_1@2x.png") no-repeat
        center;
      background-size: 100% 100%;
      display: flex;
      font-size: 16px;
      color: #ffffff;
      .LDleft {
        width: 30%;
        margin-left: 15px;
      }
      .LDRight {
        font-weight: 600;
        width: 70%;
        text-align: right;
        span {
          font-weight: 400;
        }
      }
    }
  }
  .InsectBox2 {
    width: 100%;
    height: 155px;
    position: absolute;
    top: 171px;
    display: flex;
    align-items: center;
    .Box2Img {
      width: 116px;
      height: 116px;
      margin-left: 35px;
      background: url("@/assets/PersonnelMaterials/HXT_1@2x.png") no-repeat
        center;
      background-size: 100% 100%;
    }
    .Box2Right {
      width: 155px;
      height: 80px;
      margin-left: 30px;
      // background-color: pink;
    }
  }
  .InsectBox3 {
    width: 100%;
    height: 70px;
    position: absolute;
    top: 355px;
    display: flex;
    .Box3left {
      width: 50%;
      height: 100%;
      box-sizing: border-box;
      padding: 10px;
      position: relative;
      .Box3T {
        margin-top: 0px;
        width: 100%;
        height: 20px;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #ffffff;
      }
      .Box3B {
        width: 75%;
        height: 30px;
        // background-color: red;
      }
      .nanT {
        position: absolute;
        bottom: 10px;
        right: -7px;
        width: 30%;
        font-size: 16px;
        font-weight: 600;
        span {
          font-size: 14px;
          color: #fff;
        }
      }
    }
    .Box3right {
      width: 50%;
      height: 100%;
      background-color: green;
    }
  }
  .InsectBox4 {
    width: 100%;
    height: 208px;
    position: absolute;
    top: 455px;
  }
  .InsectMBox4 {
    margin-left: 10px;
    width: 380px;
    height: 32px;
    position: absolute;
    top: 660px;
    display: flex;
    color: #c9ffee;
    .box4T1 {
      text-align: center;
      width: 25%;
      font-size: 14px;
      line-height: 32px;
    }
  }
  .InsectMBox5 {
    margin-left: 10px;
    width: 380px;
    height: 245px;
    position: absolute;
    top: 695px;
    overflow-y: scroll;
    .InsectMBox5I {
      margin-bottom: 3.5px;
      width: 380px;
      height: 32px;
      background: url("@/assets/FourMonitoring/BJ_LB@2x.png") no-repeat center;
      background-size: 100% 100%;
      display: flex;
      color: #fff;
      .box4T1 {
        text-align: center;
        width: 14.2%;
        font-size: 14px;
        line-height: 32px;
        .box4T1Img {
          display: inline-block;
          text-align: center;
          width: 40px;
          height: 32px;
        }
      }
    }
  }
}
</style>
